<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
    <script src="${path}/resources/dist/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
    <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<div id="app">
    <template>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 0">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="primary" @click="addMenu">添加菜单</el-button>
        <br/>
        <br/>


        <el-table size="small" :data="menuList" highlight-current-row v-loading="loading" border
                  element-loading-text="拼命加载中"
                  style="width: 100%;">

            <el-table-column prop="mid" label="序号" width="150"></el-table-column>
            <el-table-column prop="menu_name" label="菜单名" width="150"></el-table-column>
            <el-table-column prop="parent_id" label="父id" width="150"></el-table-column>
            <el-table-column prop="pname" label="父菜单" width="150"></el-table-column>
            <el-table-column prop="state" label="是否显示" width="100">
                <template slot-scope="scope">
                    <el-tag effect="dark">
                        {{scope.row.state==1?"显示":"不显示"}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="menu_url" label="菜单路径" width="200"></el-table-column>
            <el-table-column prop="menu_icon" label="图标" width="200">
            </el-table-column>
            <el-table-column label="图标显示">
                <template slot-scope="scope">
                    <img :src="showimg(scope.row.menu_icon)">
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="initUpdate(scope.row)" type="primary" size="small">修改</el-button>
                    <el-button @click="deleteMenu(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                       layout="sizes, prev, pager, next, jumper"
                       :page-sizes="[3, 6, 9]" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                       :current-page="pageInfo.page">
        </el-pagination>


        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
            <el-form :model="editForm">
                <el-form-item label="菜单名" :label-width="formLabelWidth">
                    <el-input type="hidden" v-model="editForm.mid"></el-input>
                    <el-input v-model="editForm.menu_name"></el-input>
                </el-form-item>
                <el-form-item v-if="editForm.parent_id" label="选择父级菜单" :label-width="formLabelWidth">
                    <el-select v-model="editForm.parent_id" placeholder="请选择">
                        <el-option v-for="obj in menuTypeSelect" :value="obj.mid" :label="obj.menu_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否显示" :label-width="formLabelWidth">
                    <el-select v-model="editForm.state" placeholder="请选择">
                        <el-option label="显示" value=1></el-option>
                        <el-option label="不显示" value=0></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单路径" :label-width="formLabelWidth">
                    <el-input v-model="editForm.menu_url" placeholder="菜单路径"></el-input>
                </el-form-item>
                <el-form-item label="图标" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            action="/fileUpdateLoad.do"
                            :show-file-list="false"
                            :on-success="successFileUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editMenu(editForm)">确 定</el-button>
            </div>
        </el-dialog>
    </template>
</div>

</body>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            formLabelWidth: "150px",
            editFormVisible: false,
            pageInfo: { //  分页数据
                pageSize: 3,// 每页显示的数据量
                page: 1, // 当前页
                total: 0 // 总条数
            },
            menuList: {},
            menuSelect: {},
            menuTypeSelect: {},
            editForm: {
                mid: 1,
                menu_name: '',
                state: '',
                menu_url: '',
                menu_icon: '',
                parent_id: '',
            },
            imageUrl: ''
        },
        methods: {
            showimg(zz){
                return ("/upload/"+zz);
            },
            addMenu() {
                vm.editForm = {}
                this.editFormVisible = true;// 显示对话框
                this.editForm.method = "addMenu";//  调用servlet中的方法名
            },
            successFileUpload(response, file, fileList) {// 文件上传成功
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(response)
                vm.editForm.menu_icon = response;
            },
            search() {// 搜索游戏信息
                var data = window.Qs.stringify(this.menuSelect);
                axios.post("${path}/menu.do?method=showMenu", data).then(response => {
                    vm.menuList = response.data.dataList;
                    vm.pageInfo = {
                        pageSize: response.data.pageNum,// 每页显示的数据量
                        page: response.data.nowPage, // 当前页
                        total: response.data.totalNum // 总条数
                    };
                });
            }
            ,
            currentChange(val) {// 当前页发生变化时触发的事件
                this.menuSelect.page = val;
                this.search();
            }
            ,
            sizeChange(val) {// 每页显示的数据量变化时触发的事件
                this.menuSelect.pageSize = val;
                this.search();
            }
            ,
            initUpdate(row) {// 初始化修改
                if (row.parent_id == 0) {
                    this.editForm = {
                        menu_name: row.menu_name,
                        mid: row.mid,
                        menu_icon: row.menu_icon,
                        state: row.state.toString()
                    }
                } else {
                    this.editForm = {
                        menu_name: row.menu_name,
                        mid: row.mid,
                        menu_icon: row.menu_icon,
                        pname: row.pname,
                        parent_id: row.parent_id.toString(),
                        state: row.state.toString()
                    }
                }
                this.editFormVisible = true;// 显示对话框
                this.editForm.method = "updateMenu";//  调用servlet中的方法名
            },
            editMenu(formName) {
                var data = window.Qs.stringify(this.editForm);
                axios.post("${path}/menu.do", data).then(response => {
                    console.log(response.data)
                    if (response.data == true) {
                        this.$notify({
                            title: '修改成功',
                            type: 'success'
                        });
                        vm.search();
                        vm.editFormVisible = false;// 关闭对话框
                    } else {
                        this.$notify.error({
                            title: '修改失败',
                        });
                    }
                });
            },
            deleteMenu(row) {
                this.$confirm('是否删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    axios.post("${path}/menu.do?method=deleteMenu&menuId=" + row.mid).then(response => {
                        if (response.data == true) {
                            this.$notify({
                                title: '删除成功',
                                type: 'success'
                            });
                            vm.search();
                            vm.editFormVisible = false;// 关闭对话框
                        } else {
                            this.$notify.error({
                                title: '删除失败',
                            });
                        }
                    });
                })
            }
        },
        mounted() {
            this.search();
            axios({
                url: "/menu.do",
                method: "post",
                data: "method=showMenuType"
            }).then(function (response) {
                vm.menuTypeSelect = response.data;
            });
        }
    });
</script>
</html>
